<template>
    <el-dialog title="设置检测区域" :visible.sync="dialoge">
        <!-- <div>请在图片上绘制检测区域,键盘删除键可删除矩形框</div> -->
        <div class="content">
            <img :src="pictureUrl" alt="">
            <canvas ref="markCanvas" tabindex='0'></canvas>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialoge = false">取 消</el-button>
            <el-button type="primary" @click="toSure">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { draw } from "@/utils/draw"; // 矩形绘制方法
export default {
    name: 'marks',
    data() {
        return {
            dialoge:false,
            markList: [], // 标记内容数组
            pictureUrl:'',
            list:[]
        }
    },
    mounted() {
        this.initCanvas(); // 画布初始化
    },
    methods: {
        toSure() {
            this.dialoge = false
            this.$emit("sure")
        },
        open() {
            this.dialoge = true
            this.markList = []
            this.list = []
            this.initCanvas()
        },
        /* 画布初始化 */
        initCanvas() {
            let that = this
            this.$nextTick(() => {
                // 初始化canvas宽高
                let cav = this.$refs.markCanvas;
                if(!cav){
                    return
                }
                cav.width = '800';
                cav.height = '944';
                let ctx = cav.getContext('2d');
                ctx.strokeStyle = 'red'
                cav.style.cursor = 'crosshair'

                // 计算使用变量
                that.list = this.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
                // 若服务端保存的为百分比则此处需计算实际座标, 直接使用实际座标可省略
                that.list.forEach(function (value, index, array) {
                    let newValue = {
                        x: value.x * cav.width,
                        y: value.y * cav.height,
                        w: value.w * cav.width,
                        h: value.h * cav.height,
                    }
                    that.list.splice(index, 1, newValue)
                })

                // 若list长度不为0, 则显示已标记框
                if (that.list.length !== 0) {
                    that.list.forEach(function (value, index, array) {
                        // 遍历绘制所有标记框
                        ctx.rect(value.x, value.y, value.w, value.h);
                        ctx.stroke();
                    });
                }

                // 调用封装的绘制方法
                draw(cav, that.list)
                // 备注: js中对象操作指向的是对象的物理地址, 获取绘制完矩形的结果数组直接取用或处理this.markList即可
            })
        },
    }
}
</script>
<style lang='scss' scoped>
.content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(0%);
    width: 800px;
    height: 944px;

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
        object-fit:contain;
    }

    canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
}
</style>